<template>
  <context-menu
    :content="message"
    :menu-list="ChatImageOrFileMenu"
    @select="(event, MenuItem) => MenuItem.click(event, message)"
  >
    <div class="relative flex flex-col justify-center items-center cursor-pointer" @click="PreviewImage(message)">
      <Image :src="message.fileUrl!" />
      <div v-if="message.upload" class="upload-overlay">
        <n-progress
          :height="2"
          :percentage="message.progress || 0"
          :show-indicator="false"
          style="width: 120px"
          type="line"
        />
        <div class="upload-text">上传中 {{ message.progress }}%</div>
      </div>
    </div>
  </context-menu>
</template>

<script lang="ts" setup>
import { IMessage } from "@/types/chat";
import ContextMenu from "@/components/ContextMenu/index.vue";

import Image from "@/components/Image/index.vue";
import { NProgress } from "naive-ui";
import { useChatMenu } from "@/hooks/useMenu.ts";

const { ChatImageOrFileMenu } = useChatMenu();
withDefaults(
  defineProps<{
    message: IMessage;
  }>(),
  {},
);

function PreviewImage(message: IMessage) {
  window.electronApi.createWindow({
    title: "previewImage",
    path: "preview?url=" + message.fileUrl + "&name=" + message.fileName,
    width: 800,
    height: 600,
  });
}
</script>

<style lang="scss" scoped>
.upload-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 16px;
  flex-direction: column;
  align-content: center;
}

.progress-bar {
  width: 0;
  height: 4px;
  background-color: #409eff;
  transition: width 0.2s ease-in-out;
}

.upload-text {
  margin-top: 10px;
  font-size: 12px;
}
</style>
